<template>
  <!-- 区块的实现-->

  <div
    v-if="element && element.key"
    class="widget-block-view drag-widget"
    :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
    @click.stop="handleSelectWidget(index)"
  >

    <el-col :span="element.options.span<6 ? 6 : element.options.span" :label="element.name">
      <el-form-item
        v-if="element && element.key && element.type != 'divider' && element.type != 'block' && element.type!='editor'"
        class="widget-view "
        :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
        :label="element.name"
        label-width="100px"
        @click.native.stop="handleSelectWidget(index)"
      >
        <widget-element-item :element="element" is-table="block" />
        <div v-if="selectWidget.key == element.key" class="widget-view-action">
          <!-- 复制, 删除图标 -->
          <button type="button" class="show-circle action-clone">
            <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone(index)" />
          </button>
          <button type="button" class="show-circle action-delete">
            <i class="iconfont icon-trash" @click.stop="handleWidgetDelete(index)" />
          </button>
        </div>

        <!--              <div class="widget-view-drag" v-if="selectWidget.key == element.key">
                    <i class="iconfont icon-drag drag-widget"></i>
                </div> -->
      </el-form-item>

    </el-col>

  </div>
</template>

<script>
import WidgetElementItem from '../../WidgetElementItem'
export default {
  components: {
    WidgetElementItem
  },
  props: ['element', 'select', 'index', 'data', 'elementIndex'],
  data() {
    return {

      selectWidget: this.select
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val
      console.log(this.index)
    },
    selectWidget: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  },
  methods: {
    handleSelectWidget(index) {
      if (this.data) {
        this.selectWidget = this.data[this.elementIndex]
      }
    },
    handleWidgetDelete(index) {
      if (this.data.length == 1) {
        this.$emit('select-change', -1)
      } else {
        if (this.data.length - 1 == index) {
          this.$emit('select-change', index - 1)
        } else {
          this.$emit('select-change', index)
        }
      }

      this.$nextTick(() => {
        this.data.splice(this.elementIndex, 1)
      })
    },
    handleWidgetClone(index) {
      const key = new Date().getTime() + ''
      let cloneData = {
        ...this.data[index],
        options: { ...this.data[index].options },
        key,
        model: this.data[index].type + key
      }

      if (Object.keys(this.data[index].options).includes('options')) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({ ...item }))
          }
        }
      }

      this.data.splice(index, 0, cloneData)

      this.$nextTick(() => {
        this.selectWidget = this.data[index + 1]
      })
    }
  }
}
</script>
